<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script>
        window.addEventListener("load", function (evt) {
            var output = document.getElementById("output");
            var input = document.getElementById("input");
            var ws;
            var print = function (message) {
                var d = document.createElement("div");
                d.innerHTML = message;
                output.appendChild(d);
            };
            document.getElementById("open").onclick = function (evt) {
                if (ws) {
                    return false;
                }
                ws = new WebSocket("ws://localhost:8081/echo"); // proxy host
                ws.onopen = function (evt) {
                    print("👍 OPENED");
                }
                ws.onclose = function (evt) {
                    print("😂 CLOSED");
                    ws = null;
                }
                ws.onmessage = function (evt) {
                    print("> " + evt.data);
                }
                ws.onerror = function (evt) {
                    console.log(evt);
                    print("[ERR]: " + evt.data);
                }
                return false;
            };
            document.getElementById("send").onclick = function (evt) {
                if (!ws) {
                    return false;
                }
                print("$ " + input.value);
                ws.send(input.value);
                return false;
            };
            document.getElementById("close").onclick = function (evt) {
                if (!ws) {
                    return false;
                }
                ws.close();
                return false;
            };
        });
    </script>
</head>

<body>
    <table>
        <tr>
            <td valign="top" width="50%">
                <p>"Open" to create a connection to the server <br>
                    "Send" to send a message to the server <br>
                    "Close" to close the connection <br>
                    You can change the message and send multiple times.
                    <p>
                        <form>
                            <button id="open">Open</button>
                            <button id="close">Close</button>
                            <p><input id="input" type="text" value="Hello world!">
                                <button id="send">Send</button>
                        </form>
            </td>
            <td valign="top" width="50%">
                <div id="output"></div>
            </td>
        </tr>
    </table>
</body>
<style>
    #output {
        background-color: black;
        color: white;
        width: auto;
        height: 400px;
        overflow: auto;
        padding: 1em;
    }
</style>

</html>